{layout name="common/layout" /}

<style>
    .swiper-container {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .gallery-top {
        height: 80%;
        width: 100%;
    }

    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }

    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
        opacity: 1;
    }

    .article-image {
        height: 600px;
    }

    @media (max-width: 767px) {

        .article-image {
            height: 400px;
        }
    }

    .selection button{
        margin-right: 30px;
        width: 60px;
    }

</style>

<div class="container" id="app">

    <div class="row">

        <main class="col-xs-12 col-md-8">

            <div class="panel panel-default article-content">
                <div class="panel-heading">
                    <ol class="breadcrumb">
                        <!-- S 面包屑导航 -->
                        {cms:breadcrumb id="item"}
                        <li><a href="{$item.url}">{$item.name|htmlentities}</a></li>
                        {/cms:breadcrumb}
                        <!-- E 面包屑导航 -->
                    </ol>
                </div>
                <div class="panel-body">
                    <div class="article-metas">
                        <h1 class="metas-title" {if $__ARCHIVES__.style}style="{$__ARCHIVES__.style_text}"{/if}>
                            {cms:archives name="title|htmlentities" /}
                        </h1>
                        <!-- S 统计信息 -->
                        <div class="metas-body">
                            <span class="views-num">
                                <i class="fa fa-eye"></i> {cms:archives name="views" /} 阅读
                            </span>
                            <span class="comment-num">
                                <i class="fa fa-comments"></i> {cms:archives name="comments" /} 评论
                            </span>
                            <span class="like-num">
                                <i class="fa fa-thumbs-o-up"></i>
                                <span class="js-like-num"> {cms:archives name="likes" /} 点赞
                                </span>
                            </span>
                        </div>
                        <!-- E 统计信息 -->
                    </div>

                    <div class="article-text">
                        <!-- S 正文 -->
                        <p>
                            {if $__ARCHIVES__.is_paid_part_of_content || $__ARCHIVES__.ispaid}
                            {cms:archives name="content" /}
                            {/if}
                        </p>
                        <!-- E 正文 -->
                    </div>

                    <div class="selection">
                        <button v-for="(item,index) in trueselect" :key="index" @click="handleSelect(item)">{{item}}</button>
                    </div>

                    <div class="article-text" v-if="istrue == false">
                        <!-- S 正文 -->
                        <p v-html="localData?.analysis"></p>
                        <!-- E 正文 -->
                    </div>

                    {include file="common/metainfo" /}

                    {include file="common/related" /}

                    <div class="clearfix"></div>
                </div>
            </div>

            {if $config.iscomment && config('fastadmin.usercenter')}
            <div class="panel panel-default" id="comments">
                <div class="panel-heading">
                    <h3 class="panel-title">{:__('Comment list')}
                        <small>共有 <span>{cms:archives name="comments" /}</span> 条评论</small>
                    </h3>
                </div>
                <div class="panel-body">
                    {if $__ARCHIVES__.iscomment}
                    {include file="common/comment" type="archives" aid="__ARCHIVES__.id"}
                    {else/}
                    <div class="text-muted text-center">评论功能已关闭</div>
                    {/if}
                </div>
            </div>
            {/if}

        </main>

        <aside class="col-xs-12 col-md-4">
            {include file="common/authorinfo" /}
            {include file="common/sidebar" /}
        </aside>

    </div>
</div>

<script type="module">
    import { addStrecord } from '/assets/js/request/cms/api.js';
    const { createApp, ref, onMounted, computed, shallowRef, watch, reactive } = Vue;

    createApp({
        data() {
            return {
                message: 'Hello Vue!',
                localData: window.archivesData,
                apiData: null,
                loading: false,
                error: null,
                prevLink: null,
                nextLink: null,
                istrue: true,
                trueselect: ['A', 'B', 'C', 'D'],
                user_id: null,
                cuowu: false,
            }
        },
        mounted() {
            // 确保 DOM 已渲染
            if (this.$refs.prevLink) {
                console.log('上一篇 URL:', this.$refs.prevLink.href);
            }
            if (this.$refs.nextLink) {
                console.log('下一篇 URL:', this.$refs.nextLink.href);
            }
            // 获取
            const cookies = document.cookie;
            const uid = this.getCookie('uid');
            if (uid) {
                this.user_id = uid;
            } else {
                console.log("请登录");
                // window.location.href = '/index/user/login.html';
                window.open('/index/user/login.html', '_blank', 'width=600,height=400');
            }
        },
        // 方法
        methods: {
            async handleSelect(selectedItem){
                if(selectedItem == this.localData.trueselect){
                    let apiData = await addStrecord({
                        model_id: this.localData.channel.model_id,
                        channel_id: this.localData.channel.id,
                        archives_id: this.localData.id,
                        user_id: this.user_id,
                        selected_item: selectedItem,
                        status: 1,
                        createtime: this.getCurrentTime(),
                        updatetime: this.getCurrentTime(),
                    });
                    window.location.href = this.$refs.nextLink.href;
                }else{
                    if(this.cuowu == false){
                        let apiData = await addStrecord({
                            model_id: this.localData.channel.model_id,
                            channel_id: this.localData.channel.id,
                            archives_id: this.localData.id,
                            user_id: this.user_id,
                            selected_item: selectedItem,
                            status: 0,
                            createtime: this.getCurrentTime(),
                            updatetime: this.getCurrentTime(),
                        });
                        this.cuowu = true;
                    }
                    this.istrue = false;
                }
            },
            getCookie(name) {
                const cookies = document.cookie.split(';');
                for (let cookie of cookies) {
                    const [key, value] = cookie.trim().split('=');
                    if (key === name) {
                        return decodeURIComponent(value);
                    }
                }
                return null;
            },
            getCurrentTime(format = 'YYYY-MM-DD HH:mm:ss') {
                const now = new Date();
                const pad = (num) => num.toString().padStart(2, '0');
                const replacements = {
                    'YYYY': now.getFullYear(),
                    'MM': pad(now.getMonth() + 1),
                    'DD': pad(now.getDate()),
                    'HH': pad(now.getHours()),
                    'mm': pad(now.getMinutes()),
                    'ss': pad(now.getSeconds()),
                };
                return format.replace(/YYYY|MM|DD|HH|mm|ss/g, (match) => replacements[match]);
            },
        }
    }).mount('#app');
</script>

<script data-render="script">
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 5,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs
            }
        });
        //点击放大
        $(document).on("click", ".article-image .gallery-top .swiper-slide", function () {
            var data = [];
            $.each($(this).parent().children(), function (i, j) {
                data.push({
                    "src": $(this).data("src")
                });
            });
            var json = {
                "title": "",
                "start": $(this).index(),
                "data": data
            };
            layer.photos(JSON.parse(JSON.stringify({photos: json})));
        });
</script>

<script>
  // 直接将 PHP 变量注入全局作用域
    var archivesData = <?php echo json_encode($__ARCHIVES__); ?>;
    console.log('原始数据:', archivesData); // 可正常访问
</script>
